﻿<phone:PhoneApplicationPage  x:Name="mainPage"
    x:Class="CetWin.Views.CategoryView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:phoneExt="clr-namespace:Phone.Framework.Behaviors;assembly=Phone.Framework"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="title" Text="Category" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <controls:Pivot x:Name="pivot"
                            SelectedIndex="{Binding SelectedPivotIndex,Mode=TwoWay,FallbackValue=-1}"
                            cal:Message.Attach="[Event SelectionChanged] = [Action ChangePivot()]">
                <!--Pivot item one-->
                <controls:PivotItem Header="Normal">
                    <Grid Margin="12,0,12,0">
                        <ListBox x:Name="histories_Element"
                                 SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                                 ItemsSource="{Binding NormalCategories}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <TextBlock Text="{Binding Name}"
                                                   FontSize="48" />
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Grid>
                </controls:PivotItem>
                <!--Pivot item two-->
                <controls:PivotItem Header="Date">
                    <Grid Margin="12,0,12,0">
                      
                            <ListBox ItemsSource="{Binding DateCategories,Mode=TwoWay}">
                                <!--<ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{Binding Name}"
                                                       Margin="10,0,0,0"
                                                       FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                                        </StackPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>-->
                            <ListBox.ItemContainerStyle>
                                <Style TargetType="ListBoxItem">
                                    <Setter Property="HorizontalContentAlignment"
                                            Value="Stretch" />
                                </Style>
                            </ListBox.ItemContainerStyle>
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel />
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <toolkit:ExpanderView Margin="0,0,0,8"
                                                        Header="{Binding}"
                                                        cal:Action.TargetWithoutContext="{Binding DataContext,ElementName=mainPage}"
                                                        cal:Message.Attach="[Event Expanded] = [Action ShowCategoryWord($source)]"
                                                        ItemsSource="{Binding Words}">
                                        <toolkit:ExpanderView.HeaderTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Name}"
                                                            Foreground="{StaticResource PhoneForegroundBrush}"
                                                            FontSize="{StaticResource PhoneFontSizeExtraLarge}"
                                                            FontFamily="{StaticResource PhoneFontFamilySemiLight}" />
                                            </DataTemplate>
                                        </toolkit:ExpanderView.HeaderTemplate>
                                        <toolkit:ExpanderView.ExpanderTemplate>
                                            <DataTemplate>
                                            <TextBlock Grid.Row="0"
                                                        Text="Expander" 
                                                            Grid.Column="1"
                                                            LineHeight="25"
                                                            LineStackingStrategy="BlockLineHeight"
                                                            TextWrapping="Wrap">
                                                </TextBlock>
                                            </DataTemplate>
                                        </toolkit:ExpanderView.ExpanderTemplate>
                                        <toolkit:ExpanderView.ItemTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding WordName}"
                                                            FontSize="{StaticResource PhoneFontSizeExtraLarge}" />
                                            </DataTemplate>
                                        </toolkit:ExpanderView.ItemTemplate>
                                    </toolkit:ExpanderView>
                                </DataTemplate>
                             </ListBox.ItemTemplate>
                            </ListBox>
                      
                    </Grid>
                </controls:PivotItem>
            </controls:Pivot>
           
        </Grid>
</Grid>
        <!--Sample code showing usage of ApplicationBar-->
        <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBar.Buttons>
                <cal:AppBarButton IconUri="Resources/Icons/appbar.add.rest.png"
                                  Text="Add Category"
                                  Message="AddCategory" />

            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
</phone:PhoneApplicationPage>
